---
  import type { HTMLAttributes } from 'astro/types';

  interface Props extends Omit<HTMLAttributes<'a'>, 'title'> {
    title: string;
    description?: string;
  }

  const { title, description, ...attributes } = Astro.props;
---

<div class="link-card">
  <span class="flex stack">
    <a {...attributes}>
      <span class="title" set:html={title} />
    </a>
    {description && <span class="description" set:html={description} />}
  </span>
  {">"}
</div>

<style>
  .link-card {
    --shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.06), 0px 2px 1px hsla(0, 0%, 0%, 0.06);
    --line-height-headings: 1.2;
    --color-white: hsl(224, 10%, 10%);
    --text-lg: 1.125rem;
    --color-gray-2: hsl(224, 10%, 23%);
    --color-gray-3: hsl(224, 7%, 36%);
    --color-gray-5: hsl(224, 6%, 77%);
    --color-gray-6: hsl(224, 20%, 94%);
    --color-gray-7: hsl(224, 19%, 97%);
  }

  html[data-theme="dark"] .link-card {
    --shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.12), 0px 2px 1px hsla(0, 0%, 0%, 0.24);
    --color-white: hsl(0, 0%, 100%);
    --color-gray-2: hsl(224, 6%, 77%);
    --color-gray-3: hsl(224, 6%, 56%);
    --color-gray-5: hsl(224, 10%, 23%);
    --color-gray-6: hsl(224, 14%, 16%);
    --color-gray-7: undefined;
  }

  .link-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    border: 1px solid var(--color-gray-5);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    position: relative;
  }

  a {
    text-decoration: none;
    line-height: var(--line-height-headings);
  }

  a::before {
    content: "";
    position: absolute;
    inset: 0;
  }

  .stack {
    flex-direction: column;
    gap: 0.5rem;
  }

  .title {
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--text-lg);
  }

  .description {
    color: var(--color-gray-3);
    line-height: 1.5;
  }

  .icon {
    color: var(--color-gray-3);
  }

  .link-card:hover {
    background: var(--color-gray-7, var(--color-gray-6));
    border-color: var(--color-gray-2);
  }

  .link-card:hover .icon {
    color: var(--color-white);
  }
</style>